<script setup lang="ts">
import { ref } from 'vue'
import type { ProductModel } from '@/api/product/product-list.ts'
import { getProductListForPurchaseId } from '@/api/product/product-list.ts'

// 添加一个方法来触发自定义事件，传递地址信息给父组件
const emit = defineEmits(['productSelected'])

const productId = ref()

function productSelected() {
  console.log(`productSelected${productId.value}`)
  for (const productModel of productModelMap.value){
    if (productModel.productId === productId.value) {
      productModel.cbdj
      console.log(`当前选中的产品ID是：${productId.value}`)
      emit('productSelected', productModel.cbdj,productModel.productId)
      break
    }
  }
}
const props = defineProps({
  purchaseId: {
    type: Number,
    default: 0,
  },
})
const productModelMap = shallowRef<ProductModel[]>([])
interface PostData {
  // 定义POST请求需要的参数接口
  purchaseId: number;
}
async function init() {
  console.log('进入到初始产品列表函数中')
  const postData: PostData = {
    purchaseId: props.purchaseId,
  }
  // 初始加载所有产品
  const { data } = await getProductListForPurchaseId(postData)
  console.log('已获取到产品列表')
  console.log(data)
  productModelMap.value = data ?? []
}

onMounted(() => {
  init()
})
</script>

<template>
  <a-select v-model:value="productId" placeholder="请选择采购产品" style="width: 300px" @change="productSelected">
    <a-select-option v-for="productModel in productModelMap" :value="productModel.productId">
      {{ productModel.productName }}
    </a-select-option>
  </a-select>
</template>

<style scoped lang="less">

</style>
